import React, { Component } from 'react';
import { createIncrement, createDecrement, createAsyncIncrement } from '../../redux/actions/count';

export default class Count extends Component {
  state = {
    count: 1,
  };
  render() {
    return (
      <div style={{ marginLeft: '10px' }}>
        <h1>总数： {this.props.store.getState()}</h1>
        <select onChange={this.selectChange} style={{ padding: '2px 10px' }}>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
        </select>
        &nbsp;&nbsp;
        <button onClick={this.increment}>加一</button>&nbsp;&nbsp;
        <button onClick={this.decrement}>减一</button>&nbsp;&nbsp;
        <button onClick={this.evenIncrement}>偶数加一</button>&nbsp;&nbsp;
        <button onClick={this.asyncIncrement}>异步加一</button>&nbsp;&nbsp;
      </div>
    );
  }
  selectChange = (e) => {
    this.setState({ count: e.target.value * 1 });
  };
  increment = () => {
    this.props.store.dispatch(createIncrement(this.state.count));
  };
  decrement = () => {
    this.props.store.dispatch(createDecrement(this.state.count));
  };
  evenIncrement = () => {
    if (this.props.store.getState() % 2 === 0) {
      this.props.store.dispatch(createIncrement(this.state.count));
    }
  };
  asyncIncrement = () => {
    this.props.store.dispatch(createAsyncIncrement(this.state.count, 500));
  };
}
